<template>
  <view class="records" @click="toDetail(item)">
    <view
      class="records-item"
      :style="isListSty ? 'width:100%;margin: 20rpx 0 0 0;' : ''"
    >
      <view class="records-item-head">
        <view class="buildding">
          <!-- <image src="@/static/images/index/build.svg	" mode=""></image> -->
          <view :class="isListSty ? 'isListSty' : ''">
            <view v-if="typeIdx == 0 && tabIdx != 3">
              {{ ['',"维保签字时间", "完成时间","报警时间","完成时间"][item.typeStatus] }}:
              {{
                tabIdx == 0
                  ? dateStringFilter(item.maintainSignatureTime)
                  : dateStringFilter(item.updateTime)
              }}</view
            >
            <view v-else
              >{{
                ["计划时间:", "报障时间:", "申请时间:", "报警时间:"][tabIdx]
              }}
              {{
                tabIdx == 0
                  ? dateStringFilter(item.planDate)
                  : tabIdx == 3
                  ? item.createTime
                  : item.createTime
              }}</view
            >
          </view>
        </view>
        <!-- 这里是历史  typeIdx 0=> 历史  1>任务安排 -->
        <view v-if="typeIdx==0">
          <view class="status" v-if="tabIdx == 0">
          <image :src="statusHistory[item.status].icon"></image>
          <view :style="{ color: statusHistory[item.status].color }">{{
            item.statusDesc
          }}</view>
        </view>
        </view>
        <!-- 这里是任务安排 -->
        <view v-if="typeIdx==1">
          <view class="status" v-if="tabIdx == 0">
          <image :src="statusBy[item.status].icon"></image>
          <view :style="{ color: statusBy[item.status].color }">{{
            item.statusDesc
          }}</view>
        </view>
        <view class="status" v-if="tabIdx == 1">
          <image
            v-if="statusWx[item.status].icon"
            :src="statusWx[item.status].icon"
          ></image>
          <view :style="{ color: statusWx[item.status].color }">{{
            statusWx[item.status].text
          }}</view>
        </view>
        <view class="status" v-if="tabIdx == 2">
          <image
            v-if="statusPj[item.status].icon"
            :src="statusPj[item.status].icon"
          ></image>
          <view :style="{ color: statusPj[item.status].color }">{{
            statusPj[item.status].text
          }}</view>
        </view>
        <view class="status" v-if="tabIdx == 3">
          <image
            v-if="statusRescue[item.planStatus].icon"
            :src="statusRescue[item.planStatus].icon"
          ></image>
          <view :style="{ color: statusRescue[item.planStatus].color }">{{
            statusRescue[item.planStatus].text
          }}</view>
        </view>
        </view>
        
      </view>

      <view class="records-item-content">
        <view class="tagDesc">
          <view class="left">
            <view class="tags" v-if="tabIdx == 0">
              <view class="lable">保养：</view>
              <view class="tag" v-for="tag in item.templateNames" :key="tag">{{
                tag
              }}</view>
            </view>
            <view class="tags" v-if="tabIdx == 1">
              <view class="lable">维修：</view>
              <view
                class="tag"
                v-for="tag in item.problemItemNames"
                :key="tag"
                >{{ tag }}</view
              >
            </view>
            <view class="tags" v-if="tabIdx == 2">
              <view class="lable">配件：</view>
              <view class="lab blue">{{ item.parts }}</view>
              <view class="lab blue">数量:{{ item.num }}</view>
            </view>

            <view class="tags" v-if="tabIdx == 3">
              <view class="lable">报警类型：</view>
              <view class="tag">{{
                item.trapType == 1 ? "伤人" : "困人"
              }}</view>
            </view>

            <view class="tags" v-if="tabIdx == 3">
              <view class="lable">报警备注：</view>
              <view class="">{{ item.trapDesc || "-" }}</view>
            </view>
          </view>

          <view
            class="right"
            v-if="
              item.planContentUserVos && item.planContentUserVos.length <= 2
            "
          >
            <view
              v-for="(user, uIdx) in item.planContentUserVos.slice(0, 2)"
              :key="uIdx"
              :class="['menber']"
              :style="{
                background: !user.signUser.isPlanStatus
                  ? '#b9b9b9'
                  : userinfo.nick_name === user.signUser.userName
                  ? '#0091ff'
                  : '#00C6C0',
              }"
            >
              <view></view>
              <text v-if="item.status > 2 && item.typeStatus != 4">
                <!-- {{ item.status }} -->
                {{
                  user.signUser.userName.length > 2
                    ? user.signUser.userName.slice(-2)
                    : user.signUser.userName
                }}
              </text>
              <text v-else>{{
                user.userName.length > 2
                  ? user.userName.slice(-2)
                  : user.userName
              }}</text>
            </view>

            <image
              v-if="item.planContentUserVos.length > 2"
              src="@/static/images/down.png"
              mode=""
            >
            </image>
          </view>
          <zb-tooltip
            @handchange="handchange($event, parentIdx, childIdx)"
            :items="item"
            @click.stop
            v-if="item.planContentUserVos && item.planContentUserVos.length > 2"
            placement="bottom"
            background="#fff"
            :right="20"
            :topS="40"
            color="#333"
            :showIcon="false"
          >
            <view class="right">
              <view
                v-for="(user, uIdx) in item.planContentUserVos.slice(0, 2)"
                :key="uIdx"
                :class="['menber']"
                :style="{
                  background: !user.signUser.isPlanStatus
                    ? '#b9b9b9'
                    : userinfo.nick_name === user.signUser.userName
                    ? '#0091ff'
                    : '#00C6C0',
                }"
              >
                <text v-if="item.status > 1 && item.typeStatus != 4">
                  {{
                    user.signUser.userName.length > 2
                      ? user.signUser.userName.slice(-2)
                      : user.signUser.userName
                  }}
                </text>
                <text v-else>{{
                  user.userName.length > 2
                    ? user.userName.slice(-2)
                    : user.userName
                }}</text>
              </view>
              <image
                v-if="item.planContentUserVos.length > 2"
                :style="item.usermore ? 'transform: rotate(180deg);' : ''"
                src="@/static/images/down.png"
                mode=""
              ></image>
            </view>
            <view class="userlist" slot="content">
              <view
                v-for="(user, uIdx) in item.planContentUserVos"
                :key="uIdx"
                class="userlist-item"
              >
                <view
                  :class="['menber']"
                  :style="{
                    background: !user.signUser.isPlanStatus
                      ? '#b9b9b9'
                      : userinfo.nick_name === user.signUser.userName
                      ? '#0091ff'
                      : '#00C6C0',
                  }"
                >
                  <text v-if="item.status > 1 && item.typeStatus != 4">
                    {{
                      user.signUser.userName.length > 2
                        ? user.signUser.userName.slice(-2)
                        : user.signUser.userName
                    }}
                  </text>
                  <text v-else>{{
                    user.userName.length > 2
                      ? user.userName.slice(-2)
                      : user.userName
                  }}</text>
                </view>
                <view
                  class="userlist-item-name"
                  :style="
                    !user.signUser.isPlanStatus
                      ? 'color: #999999;'
                      : 'color: #333'
                  "
                >
                  <text>{{ user.userName }}</text>
                </view>
              </view>
            </view>
          </zb-tooltip>
        </view>
      </view>
      <!-- 延期保养操作 -->
      <view class="delate">
        <view class="labs" v-if="tabIdx == 0">
          <view class="lab" v-if="item.overdueName">
            {{ item.overdueName }}
          </view>
          <view
            class="lab"
            style="background: #fdf1e9; color: #fa6400"
            v-if="
              (item.timeliness && item.timeliness.indexOf('超时') != -1) ||
              (item.isDeferred === 1 && item.timeliness != '及时')
            "
          >
            {{ item.timeliness }}</view
          >
          <!-- <view class="lab" v-if="item.isDeferred === 1">延期保养</view> -->
          <!-- <view class="lab" v-if="(item.deferType === 1 || item.deferType === 5) ">{{item.deferType === 1?'已延期':'特殊延期'}} </view> -->
        </view>
        <!-- <view class="labs" v-if="tabIdx == 2">
          <view class="label">配件:</view>
          <view class="lab blue">{{ item.parts }}</view>
          <view class="lab blue">数量:{{ item.num }}</view>
        </view> -->
      </view>
      <view class="delate">
        <view class="labs" v-if="tabIdx == 0">
          <view class="lab" v-if="item.deferType === 1 || item.deferType === 5"
            >{{ item.deferType === 1 ? "已延期" : "特殊延期" }}
          </view>
        </view>
      </view>

      <view class="handle" v-if="showTurnBtn && typeIdx === 1">
        <view
          class="handle_btn"
          @click.stop="handleMore(item, item.typeStatus, item.planId)"
          >更多操作</view
        >
      </view>
    </view>

    <!-- 延期保养对话框start -->
    <uni-popup ref="deferredPopup">
      <view class="popup">
        <view class="title">延期保养</view>
        <view class="content">
          <view>此任务将推迟到</view>
          <view class="delay_date">
            <text>{{ tomorrowDate + "(明天)" }}</text>
            执行
          </view>
          <view class="delay_detail">
            <view>{{ item.buildingName + item.elevatorAddress }}</view>
            <view>{{ contentList.join(",").replace(/,/g, "+") }}</view>
          </view>
        </view>
        <view class="bottom">
          <view @click="$refs.deferredPopup.close()">取消</view>
          <view class="comfire" @click="rescueComfire">确认</view>
        </view>
      </view>
    </uni-popup>
    <!-- 延期保养对话框end -->
  </view>
</template>

<script>
import { getContent } from '@/apis/index.js';
import { formatTime } from '@/utils/utils.js';
import { setRescue } from '@/apis/rescue.js';
import { mapState, mapActions } from 'vuex';
import dayjs from 'dayjs';
export default {
	props: {
		item: {
			type: Object,
		},
		tabIdx: {
			type: Number,
			default: 0,
		},
		typeIdx: {
			type: Number,
			default: 0,
		},
		userMore: {
			type: Boolean,
			default: false,
		},
		elevatorId: {
			type: String,
		},
		parentIdx: {
			type: Number,
		},
		childIdx: {
			type: Number,
		},
		isListSty: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		...mapState('user', ['userinfo']),
		showTurnBtn() {
			let flag = false;

			if (this.item.auditType === 1) {
				// 非年审梯
				// 如果是待处理//非年审梯
				if (
					this.item.status === 1 &&
          (!this.item.timeliness || this.item.timeliness == '及时')
				) {
					flag = true;
				}
			} else {
				// 如果是待处理//年审梯
				if (
					this.item.status === 1 &&
          (!this.item.timeliness || this.item.timeliness == '及时')
				) {
					flag = true;
					// 年审梯 已延期特殊延期过 不显示更多按钮
					if (this.item.planDate) {
						if (
							(this.item.deferType === 1 || this.item.deferType === 5) &&
              new Date(this.item.planDate.replaceAll('-', '/')).getTime() /
                1000 ===
                new Date(dayjs().format('YYYY/MM/DD')).getTime() / 1000
						) {
							flag = false;
						}
					}
				}
			}

			return flag;
		},
	},
	data() {
		return {
			statusHistory:{
				4: {
					text: '签字完成',
					color: '#333',
					icon: '/static/images/index/s4d.png',
				},
				5: {
					text: '维保签字',
					color: '#333',
					icon: '/static/images/index/5n.png',
				},
			},
			statusBy: {
				// 保养状态列表
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				2: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},
				3: {
					text: '已提交',
					color: '#F7B500',
					icon: '/static/images/index/3.png',
				},
				4: {
					text: '已完成',
					color: '#333',
					icon: '/static/images/index/s4d.png',
				},
				5: {
					text: '签字完成',
					color: '#fa6400',
					icon: '/static/images/index/5.png',
				},
			},
			statusWx: {
				// 维修状态
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				2: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				3: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},

				4: {
					text: '已完成',
					color: '#333',
					icon: '/static/images/index/s4d.png',
				},
				5: {
					text: '已关闭',
					color: '#999',
					icon: '',
				},
				6: {
					text: '已驳回',
					color: '#999',
					icon: '',
				},
			},
			statusPj: {
				// 配件状态
				5: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				6: {
					text: '更换中',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},

				7: {
					text: '已完成',
					color: '#333',
					icon: '/static/images/index/s4d.png',
				},
				9: {
					text: '已关闭',
					color: '#999',
					icon: '',
				},
				8: {
					text: '已驳回',
					color: '#999',
					icon: '',
				},
			},
			statusRescue: {
				// 配件状态
				1: {
					text: '调度中',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				3: {
					text: '已出发',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},

				4: {
					text: '已到达',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},
				5: {
					text: '已救援',
					color: '#999',
					icon: '',
				},
			},
			tomorrowDate: formatTime(new Date().getTime() + 24 * 60 * 60 * 1000),
			contentList: [],
		};
	},
	created() {
		//  console.log(this.item,123123)
	},
	methods: {
		// 延迟保养
		handleDelay(item, type, planId) {
			console.log(item);
			uni.showActionSheet({
				itemList: [type == 1 ? '延期保养' : '转单'],
				success: async (res) => {
					if (res.tapIndex == 0) {
						this.contentList = await this.fetchTemContent();
						this.$refs.deferredPopup.open();
					}
				},
				fail(res) {},
			});
		},
		// 更多操作 年审和非年审跳转
		handleMore(item) {
			if (
				this.item.planContentUserVos &&
        this.item.planContentUserVos.length > 0
			) {
				let result = this.item.planContentUserVos.some(
					(it) => it.userId === this.userinfo.user_id
				);
				if (!result) {
					uni.showModal({
						title: '提示',
						content: '你没有权限操作该任务',
						showCancel: false,
						confirmText: '我知道了',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
					});
					return;
				}
			}

			let arr = ['延期保养', '提前保养'];
			if (
				item.status === 1 &&
        (!item.timeliness || item.timeliness == '及时')
			) {
				// 待开始+未逾期
				if (item.auditType === 2) {
					// 年审类型
					arr = ['延期保养'];
					if (item.deferType === 5 || item.deferType === 1) {
						// 被特殊年审延期过后
						arr = ['提前保养'];
					}
				}

				if (item.auditType === 1) {
					// 非年审类型
					if (item.planDate) {
						if (
							new Date(item.planDate.replaceAll('-', '/')).getTime() / 1000 <=
              new Date().getTime() / 1000
						) {
							// 小于等于今天任务的日期只显示延期
							arr = ['延期保养'];
						}
					}
				}

				uni.showActionSheet({
					itemList: arr,
					success: async (res) => {
						let needObj = {
							planId: this.item.planId,
							buildingAddress:
                this.item.buildingName + this.item.elevatorAddress,
							planCheckName: this.item.templateNames
								? this.item.templateNames[0]
								: '',
							planDate: this.item.planDate,
							auditType: this.item.auditType,
						};
						if (this.item.auditType === 1) {
							// 非年审
							let str = '';
							if (res.tapIndex === 0) {
								// 去延期保养页面
								str =
                  '/pageModules/yearTrial/calendarEdit?needObj=' +
                  JSON.stringify(needObj) +
                  '&nums=' +
                  1;
							}
							if (res.tapIndex === 1) {
								// 去提前保养页面
								str =
                  '/pageModules/yearTrial/calendarEdit?needObj=' +
                  JSON.stringify(needObj) +
                  '&nums=' +
                  2;
							}
							uni.navigateTo({
								url: str,
							});
						}
						if (item.auditType === 2) {
							// 年审
							if (res.tapIndex == 0 && arr[0] === '延期保养') {
								uni.navigateTo({
									url:
                    '/pageModules/yearTrial/yearDelay?needObj=' +
                    JSON.stringify(needObj),
								});
							}
							if (res.tapIndex == 0 && arr[0] === '提前保养') {
								uni.navigateTo({
									url:
                    '/pageModules/yearTrial/calendarEdit?needObj=' +
                    JSON.stringify(needObj) +
                    '&nums=' +
                    3,
								});
							}
						}
					},
					fail(res) {},
				});
			}
		},
		fetchTemContent() {
			return new Promise((resolve) => {
				getContent({ planId: this.item.planId })
					.then((res) => {
						resolve(res.data);
					})
					.catch((resolve) => {
						resolve([]);
					});
			});
		},
		// 延期保养
		rescueComfire() {
			setRescue({ id: this.item.planId, isDeferred: 1 }).then((res) => {
				// console.log(res,'延期保养')
				if (res) {
					uni.showToast({
						title: '延期成功',
						icon: 'none',
					});
					this.$refs.deferredPopup.close();
					this.$emit('update');
				}
			});
		},
		handchange(val, parentIdx, childIdx) {
			// this.list[index].usermore = val;
			// console.log(val,index);
			this.$emit('userMore', { val, parentIdx, childIdx });
		},
		dateStringFilter(date) {
			if (!date) {
				return '';
			} else {
				// date.slice(0, 10)
				return date.replaceAll('-', '/');
			}
		},
		// 去工单详情
		toDetail(item) {
			console.log(item, 9999);
			if (item.typeStatus == 2) {
				// 维修详情
				uni.navigateTo({
					url:
            '/subpages/repair/repariDetail?planId=' +
            item.planId +
            '&elevatorId=' +
            this.elevatorId,
				});
			}
			// 配件更换
			if (item.typeStatus == 4) {
				console.log('配件跳转');
				uni.navigateTo({
					url: `/subpages/workOrders/partOrder?planId=${item.planId}&elevatorId=${this.elevatorId}`,
				});
			}
			// 配件更换
			// if (item.typeStatus == 4) {
			//   uni.navigateTo({
			//     url: `/subpages/workOrders/partOrder?planId=${item.planId}&elevatorId=${this.elevatorId}`,
			//   });
			// }
			if (item.typeStatus == 1) {
				// 保养详情
				// let objs = {
				// 	overdueName: item.timeliness,
				// 	planCheckName: item.templateNames && item.templateNames.join(","),
				// }
				let overdueName = item.timeliness;
				let planCheckName = item.templateNames && item.templateNames.join(',');
				uni.navigateTo({
					url: `/subpages/workOrders/detail?planId=${item.planId}&elevatorId=${this.elevatorId}&overdueName=${overdueName}&planCheckName=${planCheckName}`,
				});
			}

			if (item.typeStatus == 3) {
				uni.navigateTo({
					url: `/subpages/rescue/rescueDetail?type=1&planId=${item.planId}&elevatorId=${this.elevatorId}`,
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.records {
  width: 100%;
  color: #333;

  &-item {
    width: calc(100% - 40rpx);
    margin: 20rpx;
    background-color: #fff;
    border-radius: 8rpx;
    box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(177, 177, 177, 0.5);
    &-head {
      display: flex;
      color: #333333;
      font-size: 26rpx;
      justify-content: space-between;
      align-items: center;
      // align-items: baseline;
      border-bottom: 2rpx solid #eeeeee;
      padding: 20rpx;

      .buildding {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex: 1;
        color: #999;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 7rpx;
          padding-top: 5rpx;
        }

        view {
          flex: 1;
          line-height: 38rpx;
        }
        .isListSty {
          font-size: 24rpx;
        }
      }

      .status {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        width: 200rpx;

        image {
          width: 32rpx;
          padding-top: 3rpx;
          height: 32rpx;
          margin-right: 7rpx;
        }
      }
    }

    .tagDesc {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: flex-start;
    }

    .delate {
      padding: 0 20rpx;
      padding-bottom: 20rpx;

      .labs {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: baseline;
        .label {
          font-size: 26rpx;
          color: #666;
          margin-right: 16rpx;
        }

        .lab {
          font-size: 24rpx;
          color: #e02020;
          background: #ffe3e3;
          padding: 0rpx 13rpx;
          border-radius: 4rpx;
          margin: 8rpx 0;
          margin-right: 8rpx;
        }

        .blue {
          color: #0091ff;
          background: #dcf0ff;
        }
      }
    }

    &-content {
      padding: 0rpx 20rpx;
      display: flex;
      align-items: center;
      // padding-bottom: 12rpx;
      position: relative;

      .left {
        flex: 1;

        .name {
          font-size: 32rpx;
          font-weight: bold;
        }

        .tags {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: baseline;
          font-size: 26rpx;
          color: #666;
          margin: 16rpx 0;
          margin-bottom: 0;
          position: relative;

          .tag {
            border: 2rpx solid #cccccc;
            border-radius: 20rpx;
            font-size: 24rpx;
            padding: 0rpx 13rpx;
            margin: 8rpx 0;
            margin-right: 12rpx;
            color: #333;
          }
          .lab {
            font-size: 24rpx;
            color: #e02020;
            background: #ffe3e3;
            padding: 0rpx 13rpx;
            border-radius: 4rpx;
            margin: 8rpx 0;
            margin-right: 8rpx;
          }

          .blue {
            color: #0091ff;
            background: #dcf0ff;
          }
        }
      }

      .right {
        display: flex;
        align-items: center;
        width: 170rpx;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin-top: 16rpx;

        .menber {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20rpx;
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          background-color: #0091ff;
          color: #fff;
          margin-left: 4rpx;
        }

        image {
          width: 25rpx;
          height: 25rpx;
          margin-left: 5rpx;
          transition: 0.3s all;
        }
      }

      .userlist {
        &-item {
          display: flex;
          align-items: center;
          width: 180rpx;
          margin-bottom: 17rpx;

          .menber {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20rpx;
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            background-color: #0091ff;
            color: #fff;
            margin-left: 4rpx;
            margin-right: 14rpx;
          }

          &-name {
            font-size: 24rpx;
            color: #333;
            overflow: hidden;
            flex: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        &-item:last-child {
          margin-bottom: 0;
        }
      }
    }

    &-bottom {
      padding: 20rpx;
      border-top: 2rpx solid #eeeeee;
      color: #999999;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .handle {
    padding: 0 16rpx;
    height: 68rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 2rpx solid #eeeeee;

    .handle_btn {
      height: 36rpx;
      padding: 0 30rpx;
      border: 2rpx solid #cccccc;
      border-radius: 4rpx;
      color: #333;
      font-size: 24rpx;
      display: flex;
      align-items: center;
    }
  }

  .popup {
    padding: 24rpx 28rpx 0 28rpx;
    box-sizing: border-box;
    background-color: #fff;
    width: 506rpx;
    border-radius: 16rpx;

    .title {
      color: #333;
      font-size: 32rpx;
      font-weight: 500;
      padding-bottom: 20rpx;
    }

    .content {
      text-align: center;
      color: #333;
      margin-bottom: 38rpx;

      .delay_date {
        margin-bottom: 16rpx;
        font-size: 28rpx;

        text {
          color: #0091ff;
        }
      }

      .delay_detail {
        color: #999;
        font-size: 24rpx;
      }
    }

    .bottom {
      display: flex;
      border-top: 2rpx solid #f5f5f5;
      height: 76rpx;

      view {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #999;
      }

      .comfire {
        color: #0091ff;
        border-left: 2rpx solid #f5f5f5;
      }
    }
  }
}
</style>
